<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>

<body>
<style>
	.p{width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.p:after{
		content: "......"  /*:before和:after必带技能，重要性为满5颗星*/
	}
	.title{
		width: 220px;
	}
</style>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>我的消息</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" href="#allmesa">全部消息</a>
		<a class="mui-control-item" href="#noread">未读</a>
		<a class="mui-control-item" href="#hasread">已读</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
	<div class="mui-slider-group">
		<!--所有信息-->
		<div id="allmesa" class="mui-slider-item mui-control-content ">
			<ul class="mui-table-view" th:each="list:${list}" >
				<li class="mui-table-view-cell mui-media" style="line-height: 2">
					<a href="#">
						<div class="weui-flex">
							<div class="weui-flex__item" style="flex-grow: 1">
								<i style="color: blue" class="fa fa-bell-o fa-2x " th:if="${list.readstat==0}" aria-hidden="true"></i>
								<i style="color: grey" class="fa fa-bell-o fa-2x " th:if="${list.readstat==1}" aria-hidden="true"></i>
							</div>
							<div class="weui-flex__item" style="flex-grow: 5" >
								<input class="msgid" type="hidden" th:value="${list.msgid}"></input>
								<input class="readstat" type="hidden" th:value="${list.readstat}"></input>
								<h4 style="color: grey" th:text="${list.msgtitle}" th:if="${list.readstat==1}" onclick="allmessagedetail(this)" class="title"></h4>
								<h4  th:text="${list.msgtitle}"  th:if="${list.readstat==0}" onclick="allmessagedetail(this)" class="title"></h4>
								<p class="p" th:text="${list.msg}"></p>
							</div>
							<div class="weui-flex__item;" onclick="deletemessage(this)">
								<i class="fa fa-trash-o fa-lg"></i>
							</div>
						</div>
						<div style="margin-top: 15px;margin-bottom: 0px">
							<span th:text="${list.sendtime}">2017-10-5</span>
							<div class="mui-pull-right " style="color: orangered" th:if="${list.readstat==0}" th:text="${list.sourcename}"></div>
							<div class="mui-pull-right " style="color: grey" th:if="${list.readstat==1}" th:text="${list.sourcename}"></div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<!--未读-->
		<div id="noread" class="mui-slider-item mui-control-content ">
			<ul class="mui-table-view" th:each="list:${list2}" >
				<li class="mui-table-view-cell mui-media" style="line-height: 2">
					<a href="#">
						<div class="weui-flex">
							<div class="weui-flex__item" style="flex-grow: 1">
								<i style="color: blue" class="fa fa-bell-o fa-2x" aria-hidden="true"></i>
							</div>
							<div class="weui-flex__item" style="flex-grow: 5">
								<input class="msgid" type="hidden" th:value="${list.msgid}"></input>
								<h4 style="white-space: normal;" th:text="${list.msgtitle}" class="title" onclick="noreadmessagedetail(this)"></h4>
								<p class="p"  th:text="${list.msg}"></p>
							</div>
							<div class="weui-flex__item;" onclick="deletemessage(this)">
								<i class="fa fa-trash-o fa-lg"></i>
							</div>
						</div>
						<div style="margin-top: 15px;margin-bottom: 0px">
							<span th:text="${list.sendtime}">2017-10-5</span>
							<div class="mui-pull-right" style="color: orangered" th:text="${list.sourcename}"></div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<!--已读-->
		<div id="hasread" class="mui-slider-item mui-control-content ">
			<ul class="mui-table-view" th:each="list:${list3}" >
				<li class="mui-table-view-cell mui-media" style="line-height: 2">
					<a href="#">
						<div class="weui-flex">
							<div class="weui-flex__item" style="flex-grow: 1">
								<i style="color: grey" class="fa fa-bell-o fa-2x" aria-hidden="true"></i>
							</div>
							<div class="weui-flex__item" style="flex-grow: 5">
								<input class="msgid" type="hidden" th:value="${list.msgid}"></input>
								<h4 style="white-space: normal;color:grey " th:text="${list.msgtitle}" class="title" onclick="hasreadmessagedetail(this)"></h4>
								<p class="p"  th:text="${list.msg}"></p>
							</div>
							<div class="weui-flex__item;" onclick="deletemessage(this)">
								<i class="fa fa-trash-o fa-lg"></i>
							</div>
						</div>
						<div style="margin-top: 15px;margin-bottom: 0px">
							<span th:text="${list.sendtime}">2017-10-5</span>
							<div class="mui-pull-right" style="color: grey" th:text="${list.sourcename}"></div>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->
</div>

</body>
<script>

    /*查看全部信息详细内容*/
    function allmessagedetail($this) {
		var message=$($this).parent().find(".p").text();
        var msgid=$($this).parent().find(".msgid").val();
        var readstat=$($this).parent().find(".readstat").val();
        if(readstat==0){
            $.alert(message,'消息内容',function () {
                location.href="/person/afterread?msgid="+msgid;
            });
		}else {
            $.alert(message,'消息内容');
		}
    }
    /*查看未读信息内容*/
    function noreadmessagedetail($this) {
        var message=$($this).parent().find(".p").text();
        var msgid=$($this).parent().find(".msgid").val();
        $.alert(message,'消息内容',function () {
			location.href="/person/afterread?msgid="+msgid;
        });
    }
    /*查看已读信息内容*/
    function hasreadmessagedetail($this) {
        var message=$($this).parent().find(".p").text();
        $.alert(message,'消息内容');
    }
    
    /*删除信息*/
    function deletemessage($this) {
        var msgid=$($this).parent().find(".msgid").val();
        location.href="/person/deletemessage?msgid="+msgid;
    }
</script>
</html>
